<template>

    <div class="brand-wrapper">
        <!--      查询表单 -->
        <div class="search-form">
            <el-form :inline="true" class="demo-form-inline" size="mini">
                <el-form-item label="商品名称">
                    <el-input placeholder="请输入商品名称" v-model="searchParams.goodsName"></el-input>
                </el-form-item>

                <el-form-item label="选择商品分类">
                    <!--动态渲染  选择品牌-->
                    <el-select  placeholder="选择商品分类" v-model="searchParams.typeId">
                        <el-option v-for="(item,index) in typeList" :key="index" :label="item.typeName"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="选择品牌">
                    <!--动态渲染  选择品牌-->
                              <el-select  placeholder="选择品牌" v-model="searchParams.brandId">
                                  <el-option v-for="(item,index) in brandList" :key="index" :label="item.brandName"
                                             :value="item.id"></el-option>
                              </el-select>
                </el-form-item>
                <el-form-item label="选择颜色">
                    <!--动态渲染  选择品牌-->
                    <el-select  placeholder="选择颜色" v-model="searchParams.productColorId">
                        <el-option v-for="(item,index) in colorList" :key="index" :label="item.colorName"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择类型">
                    <!--动态渲染  选择品牌-->
                    <el-select  placeholder="选择类型" v-model="searchParams.productId">
                        <el-option v-for="(item,index) in modelList" :key="index" :label="item.productModel"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>


                <!--        <el-form-item label="活动区域">-->
                <el-form-item>
                    <el-button type="primary" @click="searchPage">查询</el-button>
                    <el-button type="warning" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--    操作功能 -->
        <div class="crud-box">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="dialogVisible=true,formData={},selectIds=[]">新建</el-button>
            <el-button type="success" size="mini" icon="el-icon-edit" :disabled="batchIds.length!=1" @click="dialogVisible=true">修改</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" :disabled="batchIds.length<=0"
                       @click="showBatchDeleteDialog">删除
            </el-button>
        </div>


        <!--    表格数据-->
        <!--:tree-props="{children: 'children'
            row-key="id"
         树状结构 children-->
        <div class="data-box">
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    @selection-change="selectChange">
                <el-table-column
                        align="center"
                        type="selection"
                        width="55">
                </el-table-column>

                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="商品编码">
                                <span>{{ props.row.goodsId }}</span>
                            </el-form-item>
                            <el-form-item label="产品颜色">
                                <span>{{ props.row.productColorId }}</span>
                            </el-form-item>
                            <el-form-item label="品牌名称">
                                <span>{{ props.row.brandId }}</span>
                            </el-form-item>
                            <el-form-item label="类别名称">
                                <span>{{ props.row.typeId }}</span>
                            </el-form-item>
                            <el-form-item label="产品型号">
                                <span>{{ props.row.productId }}</span>
                            </el-form-item>
                            <el-form-item label="市场价">
                                <span>{{ props.row.marketPrice }}</span>
                            </el-form-item>
                            <el-form-item label="商城价">
                                <span>{{ props.row.mallPrice }}</span>
                            </el-form-item>
                            <el-form-item label="销售价">
                                <span>{{ props.row.salePrice }}</span>
                            </el-form-item>
                            <el-form-item label="商品状态">
                                <span>{{ props.row.goodsStatus }}</span>
                            </el-form-item>
                            <el-form-item label="最低备货数">
                                <span>{{ props.row.minNumber }}</span>
                            </el-form-item>
                            <el-form-item label="采购模式">
                                <span>{{ props.row.businessModel }}</span>
                            </el-form-item>
                            <el-form-item label="是否为铺货">
                                <span>{{ props.row.basicsDistribution }}</span>
                            </el-form-item>
                            <el-form-item label="是否为备机">
                                <span>{{ props.row.basicsStandbyMachine }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="goodsName"
                        label="商品名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="typeId"
                        label="商品分类"
                        width="180">
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="brandId"
                        label="商品品牌">
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="productId"
                        label="商品类型">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="productColorId"
                        label="商品颜色">
                </el-table-column>
                <el-table-column

                        label="操作">
                    <template v-slot="hanjie">
                        <el-button type="primary" size="mini" icon="el-icon-edit" @click="dialogVisible=true,formData.goodsId=hanjie.row.goodsId,findById()"></el-button>
                        <el-popconfirm
                                confirm-button-text='确定'
                                cancel-button-text='取消'
                                icon="el-icon-info"
                                icon-color="red"
                                @confirm="deleteById"
                                placement="top"
                                title="是否要删除本条记录？"
                        >
                            <el-button slot="reference" type="danger" size="mini" @click="formData.goodsId=hanjie.row.goodsId"
                                       icon="el-icon-delete"></el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>

        </div>


        <!--    分页-->
        <div class="page-box">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="searchParams.pageSize"
                    :current-page="searchParams.currentPage"
                    @current-change="currentPageChange"
            >
            </el-pagination>

        </div>





        <!--弹框-->
        <el-dialog
                title="实体操作"
                :visible.sync="dialogVisible"
                width="38%"
        >
            <el-form ref="form" label-width="80px" :model="formData" size="small">
                <el-tabs v-model="activeName">
                    <!--element ui 的 Tabs 标签页 -->
                    <el-tab-pane label="基本信息1" name="first">
                        <el-form-item label="商品名称">
                            <el-input v-model="formData.goodsName"></el-input>
                        </el-form-item>
                        <el-form-item label="市场价">
                            <el-input v-model="formData.marketPrice"></el-input>
                        </el-form-item>
                        <el-form-item label="商城价">
                            <el-input v-model="formData.mallPrice"></el-input>
                        </el-form-item>
                        <el-form-item label="销售价">
                            <el-input v-model="formData.salePrice"></el-input>
                        </el-form-item>
                        <el-form-item label="选择类型">
                            <!--动态渲染  选择品牌-->
                            <el-select  placeholder="选择类型" v-model="formData.productId">
                                <el-option v-for="(item,index) in modelList" :key="index" :label="item.productModel"
                                           :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-tab-pane>

                    <el-tab-pane label="基本信息2" name="second">

                        <el-form-item label="选择颜色">
                            <!--动态渲染  选择品牌-->
                            <el-select  placeholder="选择颜色" v-model="formData.productColorId">
                                <el-option v-for="(item,index) in colorList" :key="index" :label="item.colorName"
                                           :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="选择品牌">
                            <!--动态渲染  选择品牌-->
                            <el-select  placeholder="选择品牌" v-model="formData.brandId">
                                <el-option v-for="(item,index) in brandList" :key="index" :label="item.brandName"
                                           :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="选择商品分类">
                            <!--动态渲染  选择品牌-->
                            <el-select  placeholder="选择商品分类" v-model="formData.typeId">
                                <el-option v-for="(item,index) in typeList" :key="index" :label="item.typeName"
                                           :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="最低备货数">
                            <el-input v-model="formData.minNumber"></el-input>
                        </el-form-item>
                    </el-tab-pane>

                    <el-tab-pane label="基本信息3" name="three">
                        <el-form-item label="商品状态">
                            <el-input v-model="formData.goodsStatus"></el-input>
                        </el-form-item>
                        <el-form-item label="采购模式">
                            <el-input v-model="formData.businessModel"></el-input>
                        </el-form-item>
                        <el-form-item label="是否为铺货">
                            <el-input v-model="formData.basicsDistribution"></el-input>
                        </el-form-item>
                        <el-form-item label="是否为备机">
                            <el-input v-model="formData.basicsStandbyMachine"></el-input>
                        </el-form-item>
                    </el-tab-pane>
                </el-tabs>

            </el-form>


            <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="dialogVisible = false,addOrEdit()">确 定</el-button>
  </span>
        </el-dialog>
    </div>




</template>

<script>
import basebrand from "./index";

export  default  basebrand;
</script>

<!--src 引用css样式-->
<style src="./index.scss"  lang="scss"></style>